/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'theme';
@import'color';
@import'model-beta';
@import'common';
html,
body {
    width: 100%;
    height: 100%;
    font-size: 13px;
}

a {
    text-decoration: none;
}

* {
    margin: 0 auto;
    font-family: 'icomoon', "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}

.icon-sina-weibo {
    color: #E6162D;
}

.icon-qq {
    color: #008AC5;
}

._topblock {
    // border-top:3.5rem solid rgba($themeColor,.95);
    // padding-top: 3.5rem;    
    padding-bottom: 3.5rem;
    padding-top: 80px;
}

._menublock {
    position: fixed;
    width: 100%;
    height: 0;
    z-index: 998;
    top: 0;
    left: 0;
    &.focus {
        height: 100%;
    }
}

.top_bar {
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: $btnHover;
    color: $themeColor;
    top: 0;
    left: 0;
    @include comic(.3);
    &.focus {
        @include transform(translateY(-40px));
    }
    .box {
        padding: 5px;
        width: 100%;
        box-sizing: border-box;
        ._store_title {
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 18px;
            @include Line(1);
            img {
                height: 100%;
                margin-right: 10px;
                display: inline-block;
                vertical-align: middle;
            }
            ._store_name {
                height: 30px;
                display: inline-block;
                line-height: 30px;
                vertical-align: middle;
            }
        }
        .icon-menu {
            width: 10%;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            vertical-align: middle;
        }
        .search-box {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 90%;
            border-radius: 2px;
            overflow: hidden;
            input {
                width: 100%;
                box-sizing: border-box;
                border: 0;
                height: 30px;
                padding: 0;
                line-height: 30px;
                padding-left: 20px;
            }
            .icon-search {
                color: $silver !important;
                height: 30px;
                line-height: 30px;
                text-align: center;
                width: 20px;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
    .navs {
        position: absolute;
        top: 100%;
        left: 0;
        overflow: hidden;
        .navsitem {
            color: $themeColor;
            display: block;
            padding: 0 .4rem;
            height: 0;
            margin-top: 0;
            line-height: 25px;
            background-color: $btnHover;
            @include comic(.3);
        }
        &.focus .navsitem {
            height: 25px;
            margin-top: .2rem;
            padding: .4rem;
        }
    }
}

.bottom_btn_box {
    position: fixed;
    width: 100%;
    height: 3.5rem;
    bottom: 0;
    left: 0;
    background-color: $themeColor;
    z-index: 998;
    .item {
        display: inline-block;
        vertical-align: top;
        // line-height: 2rem;
        height: 2.5rem;
        padding: .5rem 0;
        width: 20%;
        font-size: 12px;
        text-align: center;
        color: $btnHover;
        .icon-home,
        .icon-drawer,
        .icon-newspaper,
        .icon-cart,
        .icon-user,
        .icon-user2 {
            line-height: 1.5rem;
            &:before {
                font-size: 20px;
            }
        }
        &.focus {
            background-color: $btnHover;
            color: $themeColor;
        }
    }
}

._menu {
    a {
        text-decoration: none;
        color: $fontColor;
    }
    position: fixed;
    z-index: 999;
    left: 0;
    top: -10rem;
    width: 100%;
    text-align: center;
    @include comic(0.1);
    &.focus {
        top: 3.5rem;
    }
    ._menu_item {
        height: 2.5rem;
        line-height: 2.5rem;
        border-top: 1px solid $white;
        background-color: $themeColor;
        a {
            color: $fontColor;
        }
    }
}

._topinfo {
    width: 100%;
    text-align: center;
    .box {
        width: 100%;
        height: 100%;
        padding: 2.5rem 0;
    }
    ._logo {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        display: block;
        margin-bottom: .5rem;
    }
    ._storename {
        width: 100%;
        font-size: 2rem;
        line-height: 2rem;
        // color: $fontColor;
        color: $black;
        @include Line(1);
    }
}

// .picwall {
//     @include comic(0);
//     width: 100%;
//     overflow: hidden;
//     .clearfix {
//         *zoom: 1;
//     }
//     .clearfix:after {
//         clear: both;
//         content: '';
//         display: block;
//         height: 0;
//         visibility: hidden;
//     }
//     .carosule {
//         height: 100%;
//         width: 100%;
//         overflow: hidden;
//         position: relative;
//     }
//     .pic-show {
//         width: 100%;
//         height: 100%;
//         position: relative;
//         overflow: hidden;
//     }
//     .pic {
//         display: inline-block;
//         *display: inline;
//         *zoom: 1;
//         width: 100%;
//         height: 100%;
//         left: 0;
//         top: 0;
//         position: absolute;
//     }
//     .pic img {
//         width: 100%;
//         height: 100%;
//         display: block;
//         border: 0 none;
//     }
// }
.mobile_picwall {
    width: 100%;
    overflow: hidden;
    .movebox {
        width: 100%;
        @include comic(.3);
        @include breakLine;
        img {
            display: inline-block;
            vertical-align: top;
            width: 100%;
            height: 100%;
        }
    }
}

.logoinfo {
    padding: .5rem 0;
    box-sizing: border-box;
    border-left: 5px $btnHover solid;
    background-color: $white;
    position: relative;
    border-bottom: 1px solid #efefef;
    min-height: 40px;
    .logobox {
        background-color: $white;
        border-radius: 4px;
        margin: 0 .3rem;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        border: 1px solid $grayLighter;
        img {
            width: 40px;
            height: 40px;
        }
    }
    .infos {
        display: inline-block;
        vertical-align: middle;
        max-width: 250px;
        @include Line(1);
    }
    ._storename {
        font-size: 20px;
        font-weight: bold;
        color: rgba($black, .8);
    }
    .icon-phone {
        font-weight: lighter;
        font-size: 14px;
        color: rgba($black, .65);
        &:before {
            font-weight: lighter;
            font-size: 14px;
            padding-right: 5px;
        }
    }
}

.nav {
    padding-top: 1.5rem !important;
    width: 100%;
    text-align: center;
    .btn {
        border: 0;
        width: 3.4rem;
        height: 3.4rem;
        padding: 0.5rem;
        line-height: 1.1rem;
        border-radius: 50%;
        margin: 0 1rem;
        outline: none;
        box-shadow: 0 0 10px 0 rgba($gray, 0.8);
        background-color: $themeColor;
        color: $fontColor;
    }
}

.draw-icon {
    position: fixed;
    display: block;
    bottom: 5rem;
    right: .5rem;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 2px 8px 0 $grayLight;
    background-color: $white;
    img {
        width: 100%;
    }
}

._main_goods {
    background-color: #efefef;
    width: 100%;
    padding: 1rem 0;
    @include newLine;
    text-align: center;
    .main_tag_title {
        text-align: left;
        font-size: 16px;
        color: $grayLight;
        padding-left: 2%;
    }
}

// .maingoods {
//     margin-top: 1.5rem;
//     width: 100%;
//     border-radius: 2px;
//     overflow: hidden;
//     padding-bottom: 0.5rem;
//     background-color: rgba($white, 0.7);
//     border: 1px solid #efefef;
//     box-sizing: border-box;
//     // margin-bottom: 1.5rem;
//     // box-shadow: 0 0px 20px 0px $grayLight;
//     display: inline-block;
//     vertical-align: top;
//     .goodsimg {
//         width: 100%;
//         overflow: hidden;
//         img {
//             width: 100%;
//         }
//     }
//     .goodsinfo {
//         width: 100%;
//         .infoitem {
//             line-height: 1.5rem;
//             padding: 0.3rem 0.5rem;
//             @include newLine;
//             .name {
//                 color: $black;
//                 font-size: 17px;
//                 @include Line(1);
//             }
//             .intro {
//                 color: #888;
//                 height: 3rem;
//                 font-size: 14px;
//                 line-height: 1.5rem; 
//                 @include Line(2);
//             }
//             .price {
//                 font-size: 12px;
//                 color: $red;
//                 font-weight: lighter;
//                 label{
//                     font-size: 18px;
//                 }
//             }
//             .item {
//                 width: 50%;
//                 display: inline-block;
//                 &.right {
//                     text-align: right;
//                     button{
//                         font-size: 15px;
//                         border-radius: 2px;
//                         border: 1px solid #ccc;
//                         background-color: #efefef;
//                         padding: .3rem .8rem;
//                         &.disabled{
//                             background-color: $red;
//                             color: #efefef;
//                             border: 0;
//                         }
//                     }
//                 }
//             }
//             .i {
//                 width: 20px;
//                 height: 20px;
//                 display: inline-block;
//                 margin-right: 15px;
//                 text-align: center;
//                 line-height: 20px;
//                 &.icon-sina-weibo, &.icon-qq, &.icon-renren {
//                     &:before {
//                         font-size: 20px;
//                     }
//                 }
//             }
//         }
//     }
// }
.mobilemaingoods {
    display: inline-block;
    width: 31%;
    margin: 1rem .4%;
    background-color: $white;
    border-radius: 2px;
    img {
        width: 100%;
    }
    .goods_info {
        width: 100%;
        .item {
            color: $grayLight;
            padding: 3px;
            @include Line(1);
            .price {
                color: $red;
            }
        }
    }
}

.goods_list {
    position: relative;
    width: 100%;
    margin: 2.5rem 0 0 0;
    padding: 1.5rem 0;
    .goods_list_title {
        font-size: 19px;
        font-weight: lighter;
        height: 25px;
        line-height: 25px;
        margin-bottom: .8rem;
        .mark {
            width: .5rem;
            height: 25px;
            display: inline-block;
            vertical-align: bottom;
            margin-right: .5rem;
            background-color: #f1d282;
        }
    }
    .chooselist {
        @include comic(.3);
        top: 80px;
        height: 3rem;
        left: 0;
        width: 100%;
        text-align: center;
        position: fixed;
        background-color: rgba($gray, 0.6);
        z-index: 1009;
        @include comic(.3);
        &.focus {
            @include transform(translateY(-40px));
        }
        div {
            display: inline-block;
            line-height: 3rem;
            color: $fontColor;
            margin: 0 1.5rem;
            &.focus {
                color: $btnHover;
            }
        }
    }
    .getmore {
        text-align: center;
        padding: 1.5rem 0;
        .btn {
            border: 0;
            padding: 0;
            margin: 0;
            width: 160px;
            height: 2.5rem;
            line-height: 2.5rem;
            outline: none;
            background-color: $themeColor;
            color: $fontColor;
        }
    }
}

._tagbox {
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    height: 60%;
    background-color: $white;
    z-index: 998;
    top: 100%;
    left: 0;
    @include comic(.3);
    &.focus {
        @include transform(translateY(-100%));
    }
    .back-mark {
        width: 100%;
        height: 3rem;
        background-color: $themeColor;
        text-align: center;
        color: $fontColor;
        line-height: 3rem;
        font-size: 18px;
    }
    .box {
        padding: 2rem .5rem 5rem .5rem;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow-y: scroll;
        .tag_item {
            padding: 5px 10px;
            border-radius: 2px;
            display: inline-block;
            ;
            vertical-align: top;
            @include Line(1);
            background-color: $themeColor;
            color: $fontColor;
            margin: 5px 8px;
        }
    }
}

.childs_classify {
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    height: 40%;
    background-color: $white;
    z-index: 999;
    top: 100%;
    left: 0;
    @include comic(.3);
    &.focus {
        @include transform(translateY(-100%));
    }
    .close_childs {
        width: 100%;
        height: 3rem;
        background-color: $themeColor;
        text-align: center;
        color: $fontColor;
        line-height: 3rem;
        font-size: 18px;
    }
    .box {
        padding: 2rem .5rem 5rem .5rem;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow-y: scroll;
        .tag_item {
            padding: 5px 10px;
            border-radius: 2px;
            display: inline-block;
            ;
            vertical-align: top;
            @include Line(1);
            background-color: $themeColor;
            color: $fontColor;
            margin: 5px 8px;
        }
    }
}

.listitem {
    padding: 0.5rem;
    // margin: 0.5rem 0;
    border-bottom: 1px solid #ccc;
    background-color: rgba($white, 0.5);
    // box-shadow: 0 0 6px 0px rgba($gray, 0.3);
    &:last-child {
        border-bottom: 0!important;
    }
    .goodsimg {
        display: inline-block;
        width: 25%;
        text-align: center;
        vertical-align: top;
        img {
            width: 60px;
            height: 60px;
        }
    }
    .goodsinfo {
        display: inline-block;
        vertical-align: top;
        line-height: 20px;
        width: 75%;
        .name {
            width: 100%;
            height: 40px;
            color: $black;
            @include Line(2);
            .detail {
                color: $gray;
            }
        }
        .sale {
            color: $silver;
            .sitem {
                display: inline-block;
                width: 50%;
                .price {
                    color: $red;
                }
            }
        }
    }
}

.goods_details {
    width: 100%;
    // padding-top: 1.5rem;
    .goodsimg {
        width: 100%;
        overflow: hidden;
        padding-bottom: 1.5rem;
        .bigbox {
            position: relative;
            background-color: rgba($white, 0.5);
            width: 100%;
            overflow: hidden;
            .movebox {
                width: 100%;
                position: relative;
                @include breakLine;
                .bigimg {
                    width: 100%;
                    display: inline-block;
                    vertical-align: top;
                }
            }
            .pricebox {
                position: absolute;
                height: 35px;
                width: 96%;
                padding: 0 2%;
                background-color: rgba($grayLight, 0.5);
                color: $white;
                bottom: 0;
                line-height: 35px;
                .itemleft {
                    font-size: 20px;
                    color: $red;
                    font-weight: lighter;
                    display: inline-block;
                    width: 50%;
                }
                .itemright {
                    display: inline-block;
                    width: 50%;
                    font-size: 17px;
                    text-align: right;
                }
            }
        }
        .smallbox {
            width: 96%;
            padding: 0 2%;
            margin-top: 20px;
            .smallitem {
                display: inline-block;
                vertical-align: middle;
                width: 50px;
                height: 50px;
                margin-right: 10px;
                text-align: center;
                line-height: 50px;
            }
            .smallimg {
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
        }
    }
    .goodsinfo {
        width: 96%;
        padding: 1rem 2%;
        background-color: rgba($white, 0.7);
        .titlebar {
            font-size: 20px;
            margin-bottom: 10px;
            .i {
                margin: 0 0.5rem;
                display: inline-block;
                &.icon-sina-weibo,
                &.icon-qq,
                &.icon-renren {
                    &:before {
                        font-size: 20px;
                    }
                }
            }
        }
        .intro {
            padding: 1rem 0;
            color: #777;
            font-size: 15px;
            line-height: 22px;
        }
        .saleinfo {
            width: 100%;
            font-size: 16px;
            .item {
                width: 50%;
                display: inline-block;
            }
        }
        .sharebox {
            width: 100%;
            margin-bottom: .5rem;
            .title {
                padding: .3rem 0;
            }
            .sharelink {
                @include newLine;
                overflow: hidden;
                line-height: 22px;
                height: 0;
                &.focus {
                    height: auto;
                }
            }
        }
    }
    .content {
        padding: 1rem 2%;
        margin-top: 15px;
        overflow: hidden;
        @include newLine;
        line-height: 25px;
        color: $black;
        background-color: $white;
        .title {
            padding: 10px 0;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 15px;
        }
        img,
        video,
        embed,
        object {
            margin: 10px 0;
            display: block;
            max-width: 100%;
            height: auto;
        }
        .contentbox {
            width: 100%;
            overflow: scroll;
            #detailsscale {
                // width: 100%;
                @include comic(.3);
                transform-origin: 0 0;
                transform: scale(1);
            }
        }
    }
    .bottomblock {
        height: 60px;
        width: 100%;
    }
    .floatbtnbox {
        width: 100%;
        padding: 0;
        height: 3.5rem;
        line-height: 3.5rem;
        position: fixed;
        z-index: 1006;
        bottom: 0;
        text-align: center;
        background-color: $black;
        // box-shadow: 0 0 10px 0 rgba($gray, 0.6);
        .icon-arrow-left,
        .icon-home {
            display: inline-block;
            width: 11%;
            vertical-align: top;
            text-align: center;
            background-color: rgba($themeColor, .8);
            height: 3.5rem;
            line-height: 3.5rem;
            color: $fontColor;
        }
        .one {
            display: inline-block;
            width: 45%;
            vertical-align: top;
            background-color: #d0d0d0;
            .price {
                font-size: 1.5rem;
                padding-right: .2rem;
                color: $red;
            }
        }
        .buy {
            display: inline-block;
            vertical-align: top;
            width: 44%;
            overflow: hidden;
            font-size: 1.5rem;
            color: $fontColor;
            background-color: $black;
            text-align: left;
            height: 3.5rem;
            @include breakLine;
            .icon-cart2 {
                display: inline-block;
                width: 25%;
                text-align: center;
                background-color: rgba($themeColor, .8);
                height: 100%;
            }
            .method {
                font-weight: lighter;
                width: 80%;
                text-align: center;
                font-size: 17px;
                display: inline-block;
                vertical-align: top;
                height: 100%;
                background-color: $themeColor;
            }
            * {
                line-height: 3.5rem;
                font-size: 1.5rem;
            }
        }
        // .num {
        //     margin: 0 0.5rem;
        //     padding: 0.5rem;
        //     width: 2.5rem;
        //     text-align: right;
        //     border: 1px solid $themeColor;
        // }
        // .back {
        //     &.focus {
        //         top: 0;
        //     }
        //     @include comic(0.3);
        //     position: absolute;
        //     height: 100%;
        //     top: 150%;
        //     line-height: 4rem;
        //     color: $cyan;
        //     padding: 0 0.5rem;
        //     left: 0;
        // }
    }
}

.tagbox {
    width: 100%;
    padding-top: 1.5rem;
    @include newLine;
    .tag {
        padding: 0.3rem 0.5rem;
        background-color: $themeColor;
        color: $fontColor;
        display: inline-block;
        margin: 0.3rem 0.4rem;
        border-radius: 2px;
        box-shadow: 0 1px 6px 0 rgba($gray, 0.6);
    }
}

.mainbox>.goods_list {
    margin-top: 0;
}

.menubox {
    position: fixed;
    // top: 40px;
    bottom: 46px;
    left: 0;
    width: 96%;
    height: 3rem;
    line-height: 3rem;
    padding: 0 2%;
    background-color: #ccc;
    @include comic(.3);
    &.focus {
        top: 2px;
    }
    .mleft {
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }
    .mright {
        width: 50%;
        text-align: right;
        display: inline-block;
        vertical-align: top;
        .btn {
            border: 0;
            padding: 0.3rem 0.8rem;
            color: $fontColor;
            background-color: $themeColor;
            outline: none;
        }
    }
}

.draw {
    padding: .8rem 0;
    .item {
        width: 96%;
        border: 1px solid $grayLighter;
        border-radius: 2px;
        position: relative;
        background-color: $white;
        margin-bottom: 15px;
        color: $black;
        img {
            position: absolute;
            top: -5px;
            right: 5px;
            width: 30px;
            height: 30px;
        }
        .draw-title {
            padding: 5px 40px 5px 5px;
            border-bottom: 1px solid $grayLighter;
            @include Line(1);
            background-color: $grayLighter;
        }
        .draw-info {
            padding: 5px;
            .info-item {
                padding: 5px 0;
            }
        }
    }
}

.draw-item {
    width: 100%;
    min-height: 600px;
    background-image: url("images/draw_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    .draw-top {
        padding: 10px 5px;
        text-align: right;
        .role_btn {
            display: inline-block;
            border: 1px solid $white;
            color: $white;
            padding: 5px;
            border-radius: 2px;
        }
    }
    .draw-info {
        padding: 10px 5px;
        img {
            width: 100%;
        }
        .time {
            margin-top: -30px;
            color: $white;
            text-align: center;
            line-height: 20px;
        }
    }
    .draw-role {
        width: 100%;
        z-index: 1100;
        position: fixed;
        bottom: 0;
        background-color: $white;
        height: 400px;
        @include comic(.3);
        @include transform(translateY(110%));
        &.focus {
            @include transform(translateY(0%));
        }
        .back {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: $grayLighter;
            font-size: 18px;
        }
        .roles {
            height: 340px;
            padding: 10px 0;
            .box {
                height: 340px;
                overflow-y: scroll;
            }
            .item {
                padding: 5px;
                @include newLine;
                line-height: 20px;
            }
        }
    }
}

.classify {
    width: 100%;
    .main_classify {
        width: 100%;
        overflow-x: scroll;
        // border-bottom: 1px solid $grayLighter;
        .item {
            display: inline-block;
            vertical-align: top;
            padding: .5rem 0;
            box-sizing: border-box;
            width: 25%;
            text-align: center;
            border-right: 1px solid $grayLighter;
            background-color: #f9f9f9;
            color: $black;
            &:last-child {
                border-right: 0;
            }
            &.focus {
                background-color: $themeColor;
                color: $fontColor;
            }
        }
    }
    .box {
        width: 100%;
        .vertical_classify {
            display: inline-block;
            width: 25%;
            vertical-align: top;
            max-height: 700px;
            overflow-y: scroll;
            .item {
                width: 100%;
                box-sizing: border-box;
                display: block;
                padding: 1rem 0;
                border-right: 1px solid $grayLighter;
                background-color: $btnHover;
                color: $fontColor;
                text-align: center;
                &.focus {
                    background-color: $white;
                    color: $black;
                    border-right: 0;
                }
            }
        }
        .classify_goods_list {
            display: inline-block;
            vertical-align: top;
            max-height: 700px;
            overflow-y: scroll;
            width: 75%;
            box-sizing: border-box;
            padding: 1rem 1%;
            &.focus {
                width: 100%;
            }
            .item {
                width: 100%;
                border: 1px solid $grayLighter;
                margin-bottom: 1.5rem;
                &:last-child {
                    margin-bottom: 0;
                }
                img {
                    width: 100%;
                }
                .info {
                    padding: .5rem;
                    line-height: 2rem;
                    .name {
                        width: 65%;
                        padding-right: 5%;
                        @include Line(1);
                        display: inline-block;
                        vertical-align: top;
                    }
                    .price {
                        width: 30%;
                        display: inline-block;
                        vertical-align: top;
                    }
                }
            }
        }
    }
}

._cart {
    margin-top: 3rem;
    padding-bottom: 7rem;
    .cartbox {
        padding: 10px 10px;
        background-color: rgba($white, 0.5);
        z-index: 997;
    }
    ._cart_item {
        border-bottom: 1px solid $themeColor;
        width: 100%;
        padding: 1rem 0;
        .ileft {
            display: inline-block;
            vertical-align: top;
            width: 20%;
            text-align: center;
            img {
                width: 60px;
                height: 60px;
            }
        }
        .imedium {
            display: inline-block;
            width: 54%;
            margin: 0 3%;
            vertical-align: top;
            line-height: 20px;
            .name {
                color: $black;
                @include Line(2);
                height: 40px;
            }
            .info {
                color: $silver;
            }
        }
        .iright {
            display: inline-block;
            width: 20%;
            text-align: center;
            vertical-align: top;
            line-height: 20px;
            overflow: hidden;
            @include breakLine;
            ._price {
                margin-left: 0;
                width: 100%;
                display: inline-block;
                @include comic(0.2);
                &.focus {
                    margin-left: -100%;
                }
                .price {
                    color: $red;
                }
            }
            ._num {
                display: inline-block;
                width: 100%;
                vertical-align: top;
                .btn {
                    display: block;
                    border: 0;
                    height: 20px;
                    padding: 0;
                    background-color: $themeColor;
                    width: 60px;
                    outline: none;
                    color: $fontColor;
                    margin-bottom: 10px;
                }
                .num {
                    width: 50px;
                    padding: 0 3px;
                    height: 18px;
                    text-align: center;
                    outline: none;
                }
            }
        }
    }
    .floatcount {
        position: fixed;
        z-index: 998;
        bottom: 0;
        left: 0;
        background-color: $white;
        width: 100%;
        height: 3.5rem;
        text-align: center;
        box-shadow: 0 0 10px 1px rgba($gray, 0.4);
        .icon-arrow-left {
            display: inline-block;
            width: 11%;
            vertical-align: top;
            background-color: rgba($themeColor, .8);
            height: 3.5rem;
            line-height: 3.5rem;
            color: $fontColor;
        }
        .countbox {
            font-size: 16px;
            width: 89%;
            display: inline-block;
            vertical-align: top;
            height: 3.5rem;
            line-height: 3.5rem;
            button {
                font-size: 16px;
                background-color: #efefef;
                border-radius: 2px;
                border: 1px solid #ccc;
                padding: .2rem .9rem;
            }
        }
        .dem {
            display: inline-block;
            width: 1.5rem;
        }
    }
}

._storeinfo {
    width: 100%;
    padding-bottom: 2.5rem;
    .logobox {
        padding: 2.5rem 0;
        width: 100%;
        background-color: $themeColor;
        img {
            padding: 5px;
            border-radius: 2px;
            background-color: $white;
            height: 115px;
            display: block;
            margin: 0 auto;
            box-shadow: 0 0 10px 1px rgba($gray, 0.3);
        }
    }
    .infobox {
        width: 100%;
        padding: 0.5rem 0;
        box-shadow: 0 0 10px 1px rgba($gray, 0.4);
        background-color: rgba($white, 0.5);
        .item {
            padding: 1rem 0;
            // border-bottom: 1px solid rgba($gray, 0.3);
            &.last {
                border-bottom: 0;
            }
            .icons {
                text-align: center;
                color: $themeColor;
                i {
                    display: inline-block;
                    vertical-align: middle;
                    padding: 0 .5rem;
                    margin: 0 1rem;
                }
            }
            .qrcodebox {
                text-align: center;
                margin-top: 0;
                overflow: hidden;
                @include comic(.3);
                height: 0;
                &.focus {
                    height: 200px;
                    margin-top: .5rem;
                }
                .qrcode {
                    width: 200px;
                    height: 200px;
                }
            }
            .ititle {
                font-size: 19px;
                font-weight: lighter;
                height: 25px;
                line-height: 25px;
                margin-bottom: .8rem;
                .mark {
                    width: .5rem;
                    height: 25px;
                    display: inline-block;
                    vertical-align: bottom;
                    margin-right: .5rem;
                    background-color: $themeColor;
                }
            }
            .info {
                line-height: 25px;
                width: 98%;
                margin: 0 auto;
                &.p {
                    text-indent: 2rem;
                }
            }
            .infoimg {
                width: 100%;
                display: block;
            }
            .map {
                width: 100%;
                margin-top: 1.5rem;
                box-shadow: 0 0 10px 1px rgba($gray, 0.3);
            }
        }
    }
}

.sign {
    @include breakLine;
    width: 100%;
    padding-bottom: 4rem;
    min-height: 600px;
    box-sizing: border-box;
}

.sign_in {
    overflow: hidden;
    // display: inline-block;
    position: relative;
    // vertical-align: top;
    box-shadow: 0 1px 6px 1px rgba($black, 0.3);
    width: 96%;
    margin: 0 auto;
    margin-top: 1.5rem;
    min-height: 5rem;
    background-color: $white;
    @include comic(0.2);
    // &.focus {
    //     margin-left: -106%;
    // }
    a {
        text-shadow: 0 1px 5px black;
        color: $fontColor;
    }
    .inputform {
        min-height: 2rem;
        position: relative;
        width: 90%;
        padding: 2.5rem 5% 2rem 5%;
        height: 202px;
        overflow: hidden;
        @include breakLine;
        @include comic(0.2);
        &.focus {
            height: 288px;
            .inbox {
                margin-left: -120%;
            }
        }
        .inbox,
        .upbox {
            @include comic(0.3);
            margin-left: 0;
            margin-right: 20%;
            display: inline-block;
            vertical-align: top;
            width: 100%;
        }
        .checkcode {
            margin-top: -20px;
            display: block;
            color: $themeColor;
            text-shadow: 0 1px 2px;
            &.focus {
                color: $gray;
            }
        }
    }
    .readbox {
        position: relative;
        min-height: 3rem;
        background-color: $themeColor;
        padding: 2rem 5%;
        line-height: 2rem;
        font-size: 15px;
        .item {
            margin: .75rem 0;
        }
        .btn {
            right: 0;
            border-radius: 50%;
            width: 4rem;
            height: 4rem;
            background-color: $btnHover;
            border: 0;
            padding: 0;
            color: $fontColor;
            position: absolute;
            z-index: 998;
        }
        div.btn {
            box-shadow: 0 5px 15px 1px rgba($black, 0.8)!important;
            right: 1rem;
            top: -2rem;
            @include comic(0.3);
            &.focus {
                top: 18rem;
            }
        }
    }
}

._pay {
    width: 96%;
    padding: 1.5rem 2%;
    overflow: hidden;
    @include breakLine;
    .order {
        width: 100%;
        margin-right: 10%;
        margin-left: 0;
        display: inline-block;
        vertical-align: top;
        @include comic(0.3);
        &.focus {
            margin-left: -110%;
        }
        .item {
            margin-bottom: 20px;
            .ititle {
                color: $black;
                font-size: 17px;
            }
            .iinfo {
                .pay-type-wrap {
                    overflow: hidden;
                    position: relative;
                    width: 100%;
                    color: $cyan;
                    height: 32px;
                    margin: 0.5rem 0;
                    display: block;
                    border: 0;
                    background-color: rgba(0, 0, 0, 0);
                    padding: .3rem 0;
                    text-align: left;
                    line-height: 32px;
                    // color: $fontColor;
                    // background-color: $btnHover;
                    &.checked {
                        color: $fontColor;
                        background-color: $themeColor;
                        span {
                            right: -30%;
                        }
                    }
                }
                button {
                    border: 1px solid #ccc;
                    background-color: #efefef;
                    font-size: 15px;
                    padding: .3rem .8rem;
                    border-radius: 2px;
                }
                p {
                    font-size: 16px;
                }
                .pay-type {
                    width: 100%;
                    height: 100%;
                    display: block;
                    position: absolute;
                    top: 0;
                    // background-color: rgba($silver,0.3);
                    background-color: rgba($white, 0);
                    @include comic(0.2);
                    padding: 0 2%;
                    @include breakLine();
                    span {
                        display: inline-block;
                        width: 100%;
                        position: absolute;
                        // right: -30%;
                        right: -150%;
                        @include comic(0.3);
                    }
                }
                .radio {
                    // visibility: hidden;
                    // opacity: 0;
                    display: block;
                    position: absolute;
                    background-color: $white;
                    width: 100%;
                    height: 22px;
                    top: 0;
                    z-index: 3;
                }
                .radio:checked + .pay-type {
                    background-color: rgba($silver, 0.3);
                    span {
                        right: -30%;
                    }
                }
                .ticket {
                    width: 100%;
                    color: $cyan;
                    padding: 5px 0;
                    background-color: $white;
                    @include comic(.25);
                    &.checked {
                        background-color: $themeColor;
                        color: $fontColor;
                    }
                }
            }
        }
    }
    .L-input {
        margin-bottom: 40px;
        inputPlaceholder {
            top: -2px;
            font-size: 15px;
        }
        input:focus,
        input.focus {
            outline: none;
            box-shadow: none;
            + inputPlaceholder {
                color: $black;
                font-size: 18px !important;
                font-weight: 300;
                top: -22px;
                -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
                -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
                -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
                transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            }
        }
        input:not(:focus):valid + inputPlaceholder {
            color: #808080;
            font-size: 15px !important;
            font-weight: 300;
            top: -22px;
            transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        }
        input {
            font-size: 15px;
        }
    }
    .address {
        width: 100%;
        display: inline-block;
        vertical-align: top;
        button {
            font-size: 15px;
        }
        .addr {
            padding: 0.5rem 0.3rem;
            margin: 1rem 0;
            background-color: rgba($themeColor, 0.6);
            line-height: 22px;
            font-size: 15px;
            border-radius: 2px;
            // box-shadow: 0 1px 6px 0 rgba($gray, 0.5);
            @include newLine;
            color: $fontColor;
            &.focus {
                background-color: rgba($btnHover, 0.6);
            }
        }
        .add_info {
            height: 0;
            margin-top: 1rem;
            background-color: rgba($white, 0.6);
            width: 94%;
            padding: 0 3%;
            overflow: hidden;
            @include comic(0.2);
            &.focus {
                padding: 1rem 3%;
                height: 274px;
            }
            select {
                font-size: 15px;
                margin: 0 1rem 1rem 0;
            }
        }
    }
}

.topay {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    padding: 1rem 0;
    font-size: 15px;
    background-color: $white;
    // position: fixed;
    min-height: 2rem;
    // z-index: 994;
    // margin-bottom: 0;
    box-shadow: 0 0 10px 0 rgba($gray, 0.7);
    text-align: center;
    // @include comic(0.3);
    // &.focus {
    //     margin-bottom: 40%;
    // }
    div {
        // display: inline-block;
    }
    .cover {
        position: fixed;
        width: 100%;
        height: 0;
        background-color: rgba($red, 0);
        top: 50%;
        left: 0;
        z-index: 995;
        overflow: hidden;
        @include comic(0.15);
        &.focus {
            background-color: rgba(157, 157, 157, 0.9);
            height: 100%;
            top: 0;
        }
    }
    button {
        border: 0;
        font-size: 15px;
        padding: 0.3rem 0.3rem;
        outline: none;
        background-color: #efefef;
        border: 1px solid #ccc;
        // color: $fontColor;
        margin: 0.3rem;
        // box-shadow: 0 0 10px 1px rgba($black, 0.4);
    }
    .alipayform {
        z-index: 996;
        position: fixed;
        top: 30%;
        left: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        text-align: center;
        @include comic(0.15);
        &.focus {
            width: 100%;
            height: 180px;
        }
        .formtitle {
            width: 100%;
            color: $white;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 2rem;
        }
        .formitem {
            color: $white;
            width: 100%;
            font-size: 17px;
            padding: 1rem 0;
            form {
                display: inline-block;
            }
            input[type='submit'],
            .cancel {
                border: 0;
                padding: 0.3rem 0.6rem;
                border: 1px solid #ccc;
                border-radius: 2px;
                background-color: #efefef;
                display: inline-block;
                margin: 0 1.5rem;
                font-size: 15px;
            }
        }
    }
}

.goodscontent {
    padding: 0.8rem 2% 4rem 2%;
    text-align: center;
    position: fixed;
    z-index: 1005;
    top: 150%;
    left: 0;
    width: 100%;
    height: 0;
    overflow-y: scroll;
    background-color: $white;
    @include newLine;
    @include comic(0.3);
    &.focus {
        top: 0;
        height: 100%;
    }
    .back {
        text-align: left;
    }
    p {
        text-align: left;
        line-height: 1.5rem;
        margin: 0.5rem 0;
        vertical-align: top;
    }
    img {
        max-width: 85%;
        margin: 0.5rem auto;
        display: inline-block;
    }
    table {
        max-width: 85%;
        border: 0;
        margin: 0.5rem auto;
        border-collapse: collapse;
        box-shadow: 0 1px 6px 0 rgba($grayLight, 0.5);
        td {
            border: 1px solid rgba($grayLight, 0.6);
            padding: 0.5rem;
        }
    }
    embed {
        display: block;
        max-width: 85%;
        margin: 0.5rem auto;
        box-shadow: 0 1px 8px 0 rgba($grayLight, 0.6);
    }
}

.checkAdd {
    position: fixed;
    z-index: 1007;
    width: 100%;
    height: 100%;
    top: 0;
    left: 150%;
    background-color: rgba($white, 0.95);
    @include comic(0.3);
    text-align: center;
    padding-top: 50%;
    font-size: 17px;
    color: $black;
    &.focus {
        left: 0;
    }
    div {
        margin: 0.5rem auto;
        button {
            border: 0;
            background-color: $white;
            font-size: 17px;
            border-radius: 2px;
            box-shadow: 0 1px 8px 0 #c0c0c0;
            padding: 0.8rem 1.5rem;
            margin: 0.3rem 0.8rem;
        }
    }
}

.blockbottom {
    height: 80px;
}

.bottom {
    margin-top: 3.5rem;
    margin-bottom: 2.5rem;
    padding: 0.5rem 1.5%;
    text-align: center;
    a {
        color: $themeColor !important;
    }
    hr {
        clear: both;
        border: 0;
        width: 100%;
        height: 1px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: $themeColor;
    }
}

.btn {
    padding: 0.3rem 1rem;
    border: 0;
    background-color: $themeColor;
    outline: none;
    color: $fontColor;
    &.disabled {
        background-color: $btnHover;
    }
}

div.btn {
    padding: 0;
}

.help {
    width: 96%;
    padding: 0 2%;
    margin-bottom: 3rem;
    margin-top: 1rem;
    .title {
        color: #f60;
        font-size: 18px;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 0.3rem;
        margin-bottom: 0.3rem;
    }
    .helpimg {
        width: 100%;
    }
    p {
        text-indent: 2em;
        line-height: 18px;
        @include newLine();
        margin-bottom: 1rem;
    }
    table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        box-shadow: 0 1px 8px #999;
        border-radius: 2px;
        overflow: hidden;
        margin-top: 1.5rem;
        thead {
            td {
                background-color: #f0f0f0;
                padding: 0.5rem;
            }
        }
        td {
            padding: 0.3rem;
        }
    }
}
